<!--
 * @Author: your name
 * @Date: 2021-09-04 23:20:10
 * @LastEditTime: 2021-09-10 09:41:45
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ej-webui\src\views\dashboard\index.vue
-->
<template>
  <div class="dashboard-container">
    <div class="count">
<!-- 访问量 -->
<el-row :gutter="20">
  <el-col :span="6">
      <el-card class="box-card">
       <div slot="header" class="clearfix">
        <span>访问量</span>
       </div>
      <div class="content">
          <div class="content_1">
            <span>25,848</span><br><br>
            <div class="msg">日同比12.5% 周同比5%</div>
          </div>
          <el-divider></el-divider>
          <div class="flex">
            <div class="flex_item1">总访问量</div>
            <div class="flex_item2">280万</div>
          </div>
        </div>
</el-card>
</el-col>
<!-- 销售额 -->
<el-col :span="6">
      <el-card class="box-card">
       <div slot="header" class="clearfix">
        <span>销售额</span>
       </div>
        <div class="content">
          <div class="content_1">
            <span>￥12,000</span><br><br>
            <div class="msg"> <el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress></div>
          </div>
          <el-divider></el-divider>
          <div class="flex">
            <div class="flex_item1">总销售额</div>
            <div class="flex_item2">80万</div>
          </div>
        </div>
  </el-card>
  </el-col>
      <!-- 订单量 -->
      <el-col :span="6">
      <el-card class="box-card">
       <div slot="header" class="clearfix">
        <span>订单量</span>
       </div>
        <div class="content">
          <div class="content_1">
           <span>25,848</span><br><br>
            <el-progress :percentage="100" status="success"></el-progress>
          </div>
          <el-divider></el-divider>
          <div class="flex">
            <div class="flex_item1">转化率</div>
            <div class="flex_item2">60%</div>
        </div>
        </div>
  </el-card>
  </el-col>
      <!-- 用户 -->
       <el-col :span="6">
      <el-card class="box-card">
       <div slot="header" class="clearfix">
        <span>用户</span>
       </div>
        <div class="content">
          <div class="content_1">
            <span>128位</span><br><br>
            <div class="msg">日同比12.5% 周同比5%</div>
          </div>
          <el-divider></el-divider>
          <div class="flex">
            <div class="flex_item1">总用户</div>
            <div class="flex_item2">10800人</div>
          </div>
        </div>
  </el-card>
  </el-col>
</el-row>
    </div>

    <div class="nav_bar">
      <div class="item">
        <div class="board">
        <div class="img">
        <img src="../../img/yonghu.png" alt="">
        </div>
        <div>用户</div>
        </div>
      </div>
      
     <div class="item">
       <div class="board">
       <div class="img">
        <img src="../../img/fenxi.png" alt="">
       </div>
        <div>分析</div>
      </div>
     </div>

     <div class="item">
       <div class="board">
       <div class="img">
        <img src="../../img/biaoqian.png" alt="">
       </div>
        <div>标签</div>
      </div>
     </div>

      <div class="item">
        <div class="board">
        <div class="img">
        <img src="../../img/xiaoxi.png" alt="">
        </div>
        <div>消息</div>
      </div>
      </div>

     <div class="item">
       <div class="board">
       <div class="img">
        <img src="../../img/piaoju.png" alt="">
       </div>
        <div>票据</div>
      </div>
     </div>
      
     <div class="item">
       <div class="board">
       <div class="img">
        <img src="../../img/dingdan.png" alt="">
       </div>
        <div>订单</div>
      </div>
     </div>

      <div class="item">
        <div class="board">
        <div class="img">
        <img src="../../img/chanpin.png" alt="">
        </div>
        <div>产品</div>
      </div>
      </div>

      <div class="item">
        <div class="board">
        <div class="img">
        <img src="../../img/peizhi.png" alt="">
        </div>
        <div>配置</div>
      </div>
      </div>
    </div>

      <div class="chart">
       <div class="title">订单量</div>
       <el-divider></el-divider>
      <div class="chart_item">
          <div class="chart_item1">
              <h2>订单趋势</h2>
              <div id="container" style="height: 350px;"></div>  
          </div>
           <div class="chart_item2">
             <h2>订单量排行</h2>
             <div class="chart_dom2">
               <div class="phang">
                 <span class="phang_item1">1</span>
                 <span class="phang_item2">家居洗护</span>
                 <span class="phang_item3">367</span>
               </div>
             </div>
             <br>
             <div class="chart_dom2">
               <div class="phang">
                 <span class="phang_item1">2</span>
                 <span class="phang_item2">衣物洗涤</span>
                 <span class="phang_item3">456</span>
               </div>
             </div>
             <br>
             <div class="chart_dom2">
               <div class="phang">
                 <span class="phang_item1">3</span>
                 <span class="phang_item2">看护婴幼儿</span>
                 <span class="phang_item3">124</span>
               </div>
             </div>
             <br>
             <div class="chart_dom2">
               <div class="phang">
                 <span class="phang_item1">4</span>
                 <span class="phang_item2">房屋开荒</span>
                 <span class="phang_item3">467</span>
               </div>
             </div>
             <br>
             <div class="chart_dom2">
               <div class="phang">
                 <span class="phang_item1">5</span>
                 <span class="phang_item2">家庭教育</span>
                 <span class="phang_item3">788</span>
               </div>
             </div>
             <br>
             <div class="chart_dom2">
               <div class="phang">
                 <span class="phang_item1">6</span>
                 <span class="phang_item2">家庭便餐</span>
                 <span class="phang_item3">987</span>
               </div>
             </div>
             <br>
             <div class="chart_dom2">
               <div class="phang">
                 <span class="phang_item1">7</span>
                 <span class="phang_item2">打蜡</span>
                 <span class="phang_item3">12</span>
               </div>
             </div>
          </div>

<!-- 平均评价 -->
<el-row :gutter="20">
  <el-col :span="12">
      <el-card class="box-card3">
       <div slot="header" class="clearfix">
        <span>平均评价</span>
       </div>
      <div class="content">
          <div class="content_1">
            <span>4.5</span>
            <div class="block">
  <el-rate v-model="value1"></el-rate>
</div>
<br><br>
<el-progress :text-inside="true" :stroke-width="24" :percentage="100" status="success"></el-progress><br>
<el-progress :text-inside="true" :stroke-width="22" :percentage="80" status="warning"></el-progress><br>
<el-progress :text-inside="true" :stroke-width="26" :percentage="70"></el-progress><br>
<el-progress :text-inside="true" :stroke-width="20" :percentage="30" status="exception"></el-progress><br>
          </div>
        </div>
  </el-card>
  </el-col>

<!-- 用户 -->
<el-col :span="6">
      <el-card class="box-card4">
       <div slot="header" class="clearfix">
        <span>用户</span>
       </div>
       <div class="circle">
        <el-progress type="circle" :percentage="65"></el-progress>
       </div>
       <br><br>
           <span>用户总数已达标</span>  
  </el-card>
  </el-col>

      <!-- 本月目标 -->
      <el-col :span="6">
      <el-card class="box-card4">
       <div slot="header" class="clearfix">
        <span>本月目标</span>
       </div>
       <div class="circle">
         <el-progress type="circle" :percentage="85"></el-progress>
         </div>
         <br><br>
           <span>恭喜！本月目标已达标</span>  
    </el-card>
    </el-col>
  </el-row>
      </div>
        </div>
</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Column } from '@antv/g2plot';

export default {
   data() {
      return {
        value1: null,
        value2: null,
        colors: ['#99A9BF', '#F7BA2A', '#FF9900'] 
      }},
    
  name: 'Dashboard',
  computed: {
    ...mapGetters([
      'name'
    ])
  },

  mounted() {
    const data = [
     {
    type: '1月',
    sales: 38,
  },
  {
    type: '2月',
    sales: 52,
  },
  {
    type: '3月',
    sales: 61,
  },
  {
    type: '4月',
    sales: 145,
  },
  {
    type: '5月',
    sales: 48,
  },
  {
    type: '6月',
    sales: 38,
  },
  {
    type: '7月',
    sales: 38,
  },
  {
    type: '8月',
    sales: 38,
  },
];
   const columnPlot = new Column('container', {
  data,
  xField: 'type',
  yField: 'sales',
  label: {
    // 可手动配置 label 数据标签位置
    position: 'middle', // 'top', 'bottom', 'middle',
    // 配置样式
    style: {
      fill: '#FFFFFF',
      opacity: 0.6,
    },
  },
  xAxis: {
    label: {
      autoHide: true,
      autoRotate: false,
    },
  },
  meta: {
    type: {
      alias: '类别',
    },
    sales: {
      alias: '销售额',
    },
  },
});
columnPlot.render();
  }
}
</script>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.img{
    cursor:pointer;
}  
.item{
  text-align: center;
}
img{
  width: 60px;
  height: 60px;
}
span{
  font-size: 20px;
}
.content_1 > span{
  font-size: 35px;
  color:rgb(81,90,110);
}

.flex{
  margin-top: 8px;
  .flex_item1{
    float: left;
  }
  .flex_item2{
    float:right;
  }
}
  .box-card {
    width: 280px;
    height: 250px;
    .flex{
      float: left;
    }
  }
  .nav_bar > .item{
    background-color:rgb(245,247,249);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 130px;
    width: 130px;
    margin:0 10px;
    margin-top: 18px;
    float: left;

  }
  .chart{
    margin-top: 200px;
    width: 100%;
    height: 300px;
    
    .chart_item1{
      float: left;
      width: 800px;
      height: 400px;
    }
    .chart_item2{
      float: right;
      width: 400px;
      height: 400px;
      .phang_item3{
        float: right;
      }
    }
  }
  .box-card3{
    margin-top: 50px;
    width: 600px;
    height: 400px;
  }
  .box-card4{
    margin-top: 50px;
    width: 300px;
    height: 400px;
  }
  .circle{
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .left{
    width: 200px;
  }
  .right{
    width: 200px;
  }
</style>
